<template>
  <div>
    <div>
      <!-- <el-button @click="goBack">返回</el-button> -->
    </div>
    <div style="width: 70%; padding-top: 30px; margin-left: 10%">
      <el-form ref="form" label-width="100px" :model="form" style="width: 70%">
        <el-form-item label="机构名称">
          <el-input v-model="form.mec_name" placeholder="请输入机构名称" />
        </el-form-item>
        <el-form-item label="机构联系人">
          <el-input
            v-model="form.mec_contacts"
            placeholder="请输入机构联系人"
          />
        </el-form-item>
        <el-form-item label="机构地址">
          <el-input v-model="form.mec_address" placeholder="请输入机构地址" />
        </el-form-item>
        <el-form-item label="机构电话">
          <el-input v-model="form.mec_tel" placeholder="请输入机构电话" />
        </el-form-item>
        <el-form-item label="机构logo">
          <el-upload
            action="https://devapi.jbkl.com/api/upload_img"
            :before-upload="beforeUpload"
            class="avatar-uploader"
            :on-error="uploadImgErr"
            :on-success="uploadImgSuc"
            :show-file-list="false"
          >
            <img
              v-if="imageUrl"
              class="avatar"
              :src="imageUrl"
              style="width: 200px"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="
                width: 100px;
                height: 100px;
                line-height: 100px;
                border: 1px solid #c0c4cc;
              "
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="客服电话">
          <el-input v-model="form.service_tel" placeholder="请输入客服电话" />
        </el-form-item>
        <el-form-item label="营业状态">
          <el-radio-group v-model="form.mec_status">
            <el-radio label="opening">营业</el-radio>
            <el-radio label="closed">歇业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否正常启用">
          <el-radio-group v-model="form.is_del">
            <el-radio label="N">正常</el-radio>
            <el-radio label="Y">注销</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上午上班时间">
          <el-time-picker
            v-model="form.morning_start_time"
            format="HH:mm"
            placeholder="上午上班时间"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item label="上午下班时间">
          <el-time-picker
            v-model="form.morning_end_time"
            format="HH:mm"
            placeholder="上午下班时间
"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item label="下午上班时间">
          <el-time-picker
            v-model="form.afternoon_start_time"
            format="HH:mm"
            placeholder="下午上班时间"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item label="下午下班时间">
          <el-time-picker
            v-model="form.afternoon_end_time"
            format="HH:mm"
            placeholder="下午下班时间"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item label="营业时间">
          <el-checkbox-group
            v-model="checkTypeList"
            @change="handleCheckAllChange"
          >
            <el-checkbox
              v-for="(item, index) in sendTypeList"
              :key="index"
              :label="item.value"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getArea } from '@/api/level'
  import { mechanismAdd } from '@/api/mechanism'

  export default {
    props: {
      mcdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        sendTypeList: [
          {
            value: '0',
            label: '星期天',
          },
          {
            value: '1',
            label: '星期一',
          },
          {
            value: '2',
            label: '星期二',
          },
          {
            value: '3',
            label: '星期三',
          },
          {
            value: '4',
            label: '星期四',
          },
          {
            value: '5',
            label: '星期五',
          },
          {
            value: '6',
            label: '星期六',
          },
        ],
        checkTypeList: [],

        value1: '',
        form: {
          mec_name: '',
          mec_logo: '',
          mec_contacts: '',
          mec_address: '',
          mec_tel: '',
          service_tel: '',
          mec_status: '',
          is_del: '',
          morning_start_time: '',
          morning_end_time: '',
          afternoon_start_time: '',
          afternoon_end_time: '',
          work_week: '',
        },
        imageUrl: '',
        baddress: '',
        workWeekOptions: [],
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const params = {
              pid: 0,
            }
            params.pid = node.value
            getArea(params).then((res) => {
              const arr = []
              res.data.forEach((e) => {
                arr.push({
                  value: e.id + '-' + e.name,
                  label: e.name,
                  leaf: e.level >= 3,
                })
              })
              resolve(arr)
            })
          },
        },
      }
    },
    watch: {},
    mounted() {
      this.form.mec_name = this.mcdata.mec_name
      this.form.mec_logo = this.mcdata.mec_logo
      this.form.mec_contacts = this.mcdata.mec_contacts
      this.form.mec_address = this.mcdata.mec_address
      this.form.mec_tel = this.mcdata.mec_tel
      this.form.service_tel = this.mcdata.service_tel
      this.form.mec_status = this.mcdata.mec_status
      this.form.is_del = this.mcdata.is_del

      this.form.morning_start_time = this.mcdata.morning_start_time
      this.form.morning_end_time = this.mcdata.morning_end_time
      this.form.afternoon_start_time = this.mcdata.afternoon_start_time
      this.form.afternoon_end_time = this.mcdata.afternoon_end_time
      this.form.work_week = this.mcdata.work_week
      this.imageUrl = this.mcdata.mec_logo
      this.checkTypeList = this.mcdata.work_week.split(',')
      // this.form.id = this.mcId
    },
    created() {},
    methods: {
      onSubmit() {
        //
        this.form.mec_id = window.localStorage.getItem('mec_id')
        const jy = {
          mec_name: '机构名称',
          mec_type: '机构类型',
          mec_logo: '机构logo',
          mec_contacts: '机构联系人',
          mec_address: '机构地址',
          mec_tel: '机构电话',
          service_tel: '客服电话',
          mec_status: '营业状态',
          is_del: '是否正常启用',
          morning_start_time: '上午上班时间',
          morning_end_time: '上午下班时间',
          afternoon_start_time: '	下午上班时间',
          afternoon_end_time: '	下午下班时间',
          work_week: '营业日期',
        }

        if (Object.keys(this.form).length === 0) {
          this.$message.error('请填写信息')
          return
        } else {
          for (var key in this.form) {
            if (this.form[key] == '' || this.form[key] == null) {
              this.$message.error(jy[key])
              return
            }
          }
        }
        mechanismAdd(this.form).then(() => {
          window.localStorage.setItem(
            'afternoon_end_time',
            this.form.afternoon_end_time
          )
          window.localStorage.setItem(
            'morning_start_time',
            this.form.morning_start_time
          )
          window.localStorage.setItem(
            'afternoon_start_time',
            this.form.afternoon_start_time
          )

          window.localStorage.setItem(
            'morning_end_time',
            this.form.morning_end_time
          )
          this.goBack()
        })
      },
      workWeekChange(e) {
        this.form.work_week = e.toString()
      },
      uploadImgSuc(res, file) {
        this.form.mec_logo = res.data
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      uploadImgErr() {},
      beforeUpload(file) {
        let _this = this
        const is1M = file.size / 1024 / 1024 < 1 // 限制小于1M
        const isSize = new Promise(function (resolve, reject) {
          let width = 100 // 限制图片尺寸为654X270
          let height = 100
          let _URL = window.URL || window.webkitURL
          let img = new Image()
          img.onload = function () {
            let valid = img.width === width && img.height === height
            valid ? resolve() : reject()
          }
          img.src = _URL.createObjectURL(file)
        }).then(
          () => {
            return file
          },
          () => {
            _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
            return Promise.reject()
          }
        )
        if (!is1M) {
          _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
        }
        return isSize & is1M
      },
      handleCheckAllChange(e) {
        this.form.work_week = e.toString()
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
    },
  }
</script>

<style></style>
